<%@ page contentType="text/html;charset=UTF-8" language="java"
         import="com.cj.po.Dormitory" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>后台登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="icon" href="${pageContext.request.contextPath}/images/favicon.ico" sizes="32x32"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/xadmin.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.3.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/xadmin.js"></script>

    <style type="text/css">
        .layui-table {
            text-align: center;
        }

        .layui-table th {
            text-align: center;
        }
    </style>
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="${pageContext.request.contextPath}">首页</a>
        <a href="${pageContext.request.contextPath}/findClassStudent">班级学生</a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="${pageContext.request.contextPath}/findClassStudent" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" action="${pageContext.request.contextPath}/findClassStudent">
            <input class="layui-input" placeholder="请输入班级编号" name="c_classid" id="c_classid">
            <input class="layui-input" placeholder="请输入班级名" name="c_classname" id="c_classname">
            <button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <%--表格数据--%>
    <table class="layui-table" id="tb">
        <thead>
        <tr>
            <th>班级编号</th>
            <th>班级名</th>
            <th>辅导员</th>
            <th>学生学号</th>
            <th>学生姓名</th>
            <th>电话</th>
            <th>宿舍编号</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 将返回的Model数据的students集合分步提取出来，循环遍历 -->
        <c:forEach items="${pi.list}" var="cs">
            <tr>
                <td>${cs.c_classid}</td>
                <td>${cs.c_classname}</td>
                <td>${cs.c_counsellor}</td>
                <td>${cs.s_studentid}</td>
                <td>${cs.s_name}</td>
                <td>${cs.s_phone}</td>
                <td>${cs.s_dormitoryid}</td>
                <td>
                    <a class="layui-btn layui-btn-xs" onclick="editStudent(${cs.s_studentid})">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteStudent(${cs.s_studentid})">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<script>
    layui.use(['form', 'layer', 'laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate;

        form.on('submit(search)', function (data) {
            var param = data.field;
            console.log(JSON.stringify(param));

            $.ajax({
                url: '${pageContext.request.contextPath}/findClassStudent',
                type: 'get',
                data: param,
                dataType: 'json',
                success: function (dd) {
                    // 清空表格内容
                    $('#tb tbody').empty();

                    // 将获取的JSON数据分步提取出来，前一段为Class数据，后面多段为Student数据
                    var s = '';
                    for (var i in dd.list) {
                        var cs = dd.list[i];
                        s += '<tr>' +
                            '<td>' + cs.c_classid + '</td>' +
                            '<td>' + cs.c_classname + '</td>' +
                            '<td>' + cs.c_counsellor + '</td>' +
                            '<td>' + cs.s_studentid + '</td>' +
                            '<td>' + cs.s_name + '</td>' +
                            '<td>' + cs.s_phone + '</td>' +
                            '<td>' + cs.s_dormitoryid + '</td>' +
                            '<td>' +
                            '<a class="layui-btn layui-btn-xs" onclick="editStudent(' + cs.s_studentid + ')">编辑</a>' +
                            '<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="deleteStudent(' + cs.s_studentid + ')">删除</a>' +
                            '</td>' +
                            '</tr>';
                    }

                    // 将刷新部分拼接到表格需要刷新的地方
                    $('#tb tbody').append(s);
                },
                error: function () {
                    layer.msg('查询失败');
                }
            });

            return false; // 阻止表单默认提交
        });

        // 编辑学生信息
        function editStudent(s_studentid) {
            layer.open({
                type: 2,
                title: '编辑学生信息',
                shadeClose: true,
                shade: 0.8,
                area: ['80%', '80%'],
                content: '${pageContext.request.contextPath}/findStudentById?s_studentid=' + s_studentid // 弹出编辑页面
            });
        }

        // 删除学生信息
        function deleteStudent(s_studentid) {
            layer.confirm('确认删除吗？', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    url: '${pageContext.request.contextPath}/deleteClassStudent',
                    type: 'get',
                    data: {s_studentid: s_studentid},
                    dataType: 'json',
                    success: function (res) {
                        if (res === "success") {
                            layer.msg('删除成功');
                            location.reload(); // 刷新页面
                        } else {
                            layer.msg('删除失败');
                        }
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                });
                layer.close(index);
            });
        }
    });
</script>

</body>
</html>
